<template> 
    <div class="divApp">
        <div class="divHeader"> 
            <div class="divTopbar">
                <div class="divLogo">
                    rtc demo
                </div>

                <ul class="lstActions">
                    <li>
                        <el-button size="small" @click="connectSvr">connect</el-button>
                    </li>
                    <li>
                        <el-button size="small" @click="loadSeats">load seats</el-button>
                    </li> 
                    <li>
                        <el-button size="small" @click="createRemotePeers">create remote peers</el-button>
                    </li> 
                </ul>


                <div class="divUser">
                    <i class="fa fa-user-circle"></i> 系统管理员
                </div>
            </div> 
        </div>
        <div class="divBody">
            <div class="divRemote">
                <div class="divVideo"
                    v-for="(item,index) in settings.seats.items" 
                    :key="index"
                >
                    <video muted :id="'rv-'+item.code" :data-seatkey="item.code" autoplay></video>
                </div> 
            </div>
            <div class="divLocal">
                <div class="divLocalAction">
                    <el-button size="small" type="success"  @click="openLocalPeer">open</el-button>
                    <div class="divPick" style="padding:0px 10px">
                        <el-select size="small" v-model="settings.seats.key">
                            <el-option
                            v-for="(item,index) in settings.seats.items" 
                            :key="index"
                            :label="item.text"
                            :value="item.code">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button size="small" type="primary"  @click="pushLocalVideo">push</el-button>                    
                </div>
                <div class="divV">
                    <video muted id="lv" autoplay></video>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var rtc = require('./kmsClient.js');
    export default {
        mounted(){
            var me = this;
            try{

            }
            catch(er){
                console.log(er);
            }
        },
        data(){
            return{
                settings:{
                    channelCode:"rtcDemo",
                    seats:{
                        items:[
                            {code:"s01" , text:'业主'} ,
                            //{code:"s02" , text:'监理'} ,
                            //{code:"s03" , text:'施工'} ,
                            //{code:"s04" , text:'第三方'} 
                        ],
                        key:"s01"
                    }
                },
                objs:{
                    channel: null,
                    seats:{},
                    pullPeers:{},
                    pushPeer: null
                }
            }
        },
        methods:{
            connectSvr(){
                var me = this;
                var seats = {};
                return new Promise((success, faild) => {
                    try { 
                        me.rtc.loadChannels().then(_=>{
                            return me.rtc.createSingleChannel(me.settings.channelCode);
                        }).then(_ch=>{
                            me.objs.channel = _ch;
                            console.log('connect 2 svr.' , _ch);
                            success();
                        });
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            },
            loadSeats(){
                var me = this;
                var seats = {};
                return new Promise((success, faild) => {
                    try { 
                        me.objs.channel.loadSeats().then(_seats=>{
                            var items = JSON.parse(JSON.stringify(me.settings.seats.items));
                            var loadItem = ()=>{
                                if( items.length>0 ){
                                    var item = items.shift();
                                    me.objs.channel.createSingleSeat(item.code).then(_seat=>{
                                        me.objs.seats[_seat.seatCode] = _seat;
                                        loadItem();
                                    });
                                }
                                else{
                                    console.log('load seats.' , me.objs.channel , _seats);
                                    success(me.objs.seats);
                                }
                            };
                            loadItem();
                        })
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            },
            createRemotePeers(){
                var me = this;
                var seats = {};
                return new Promise((success, faild) => {
                    try { 
                        var items = me.settings.seats.items.filter(item=>{
                            var flag = !( me.objs.pullPeers[item.code] && me.objs.pullPeers[item.code]!=null );
                            return flag;
                        });
                        var loadItem = ()=>{
                            if( items.length>0){
                                var item = items.shift();
                                me.createRemotePeerItem(item.code).then(_peer=>{
                                    me.objs.pullPeers[item.code] = _peer;
                                    loadItem();
                                });
                            }
                            else{
                                success(me.objs.pullPeers);
                            }
                        };
                        loadItem();
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            },
            createRemotePeerItem(peerCode){
                var me = this; 
                return new Promise((success, faild) => {
                    try { 
                        var flag = !( me.objs.pullPeers[peerCode] && me.objs.pullPeers[peerCode]!=null );
                        if(flag){
                            var video = document.getElementById('rv-'+peerCode);
                            var peer = new rtc.THhuPeer(me.rtc.config , me.objs.channel, peerCode, 'r', video);
                            me.objs.pullPeers[peerCode]  = peer;
                            peer.open().then(_=>{
                                var seat = me.objs.seats[peerCode];
                                return peer.connectSeat(seat);
                            }).then(_=>{                                
                                success(peer);
                            })
                        }
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            },
            openLocalPeer(){
                var me = this; 
                return new Promise((success, faild) => {
                    try { 
                            var flag = !( me.objs.pushPeer && me.objs.pushPeer!=null );
                            if(flag){
                                var video = document.getElementById('lv');
                                var peer = new rtc.THhuPeer(me.rtc.config , me.objs.channel, 'localPeer', 's', video);
                                me.objs.pushPeer = peer;
                                peer.open().then(_=>{
                                    success(peer);
                                })
                            }

                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            },
            pushLocalVideo(){
                var me = this;
                var seats = {};
                return new Promise((success, faild) => {
                    try { 
                        var seatCode = me.settings.seats.key;
                        var seat = me.objs.channel.seats[seatCode];
                        var pusher = me.objs.pushPeer;
                        pusher.connectSeat(seat).then(_=>{
                            console.log(_);
                            return seat.passthrough.getSourceConnections();
                        }).then(_sources=>{
                            console.log(_sources);
                            return seat.passthrough.getSinkConnections();
                        }).then(_skins=>{
                            console.log(_skins); 
                            var s  = me.objs.pushPeer.end;
                            var t  = me.objs.pullPeers[seatCode].end;
                            return s.connect(t);
                        }).then(_skins=>{
                            return me.objs.pushPeer.end.release();
                        }).then(_=>{                            
                            success();
                        });

                    } catch (er) {
                        console.log(er);
                        success();
                    }
                });
            } 
        }
    }
</script>

<style lang="less" scoped>
    .divApp{
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .divHeader{
        position: fixed;
        top:0;
        width: 100%;
        background-color: #eee;

        .divLogo{
            font-size: 1.5em;
            font-weight: bold;
        }

        .lstActions{
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            li{
                padding: 0 5px;
            }
        }
    }
    .divTopbar{
        padding: 10px 15px; 
        display: flex;
        align-items: center;
        justify-content:space-between; 
    }
    .divBody{
        flex:1;
        padding: 15px;
        padding-top: 65px;
        display: flex;
        .divRemote{
            width: 75%;
            display: grid;
            grid-template-rows: 50% 50%;
            grid-template-columns: 50% 50%;
            border:1px solid #444;
            .divVideo{
                height: 100%;
                position: relative;
                border:1px solid #444;
                video{
                    position: absolute;
                    left: 0;top: 0;width: 100%; height: 100%;
                    background-color: #222;
                    object-fit: cover;
                }
            }
        }
        .divLocal{
            flex: 1;
            padding-left: 15px;
            .divLocalAction{
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
            }
            .divV{
                position: relative;
                height: 0;
                padding-bottom: 75%;
                video{
                    position: absolute;
                    left: 0;top: 0;width: 100%; height: 100%;
                    background-color: #222;
                    object-fit: cover;
                }
            }
        }


    }
</style>